<template>
  <div class="config">
    <!-- 填报项 -->
    <div
      class="configItem"
      v-for="(data, index) in configItemList"
      :key="index"
    >
      <!-- 填报标题 -->
      <div class="itemTitle">
        <div></div>
        <span>{{ data.title }}</span>
      </div>
      <!-- 路径选择 -->
      <div class="itemContent">
        <button @click="itemClick">{{ data.buttonText }}</button>
        <input
          type="file"
          id="fileInput"
          :accept="data.acceptType"
          @change="handleFolderSelection(data)"
        />
        <br />
        <p>当前路径：</p>
        <input type="text" class="result" v-model="data.value" />
      </div>
    </div>
  </div>
</template>
      
<script>
/*eslint-disable*/
import { getCurrentInstance, onMounted } from "vue";
import { ElMessage } from "element-plus";
import mainApi from "@/api/mainApi.js";
import pubsub from "pubsub-js";

export default {
  name: "配置项",
  data() {
    return {
      // 拼接json路径
      jsonPath: window.myApi.path.join(
        window.myApi.dirName,
        "../store/navigation.json"
      ),
      // 文件导航json
      navigationJson: {},
      // 配置项列表
      configItemList: [
        {
          title: "文件仓库路径",
          nickName: "fileHouse",
          value: "",
          buttonText: "+选择标识文件",
          acceptType: ".flag",
        },
        {
          title: "waigua路径",
          nickName: "waigua",
          value: "",
          buttonText: "+选择waigua中的一个文件",
          acceptType: "*/*",
        },
      ],
    };
  },
  setup() {
    const { proxy } = getCurrentInstance();

    onMounted(() => {
      // 读取现有路径
      readJson();
    });

    // 读取导航JSON
    function readJson() {
      mainApi.readJson(ElMessage, (data) => {
        // 将 JSON 字符串解析为 JavaScript 对象
        proxy.navigationJson = data;
        // 将json对象读入dom
        for (const key in proxy.navigationJson) {
          proxy.configItemList.forEach((item) => {
            if (item.nickName === key) {
              item.value = proxy.navigationJson[key];
            }
          });
        }
      });
    }

    return {};
  },
  methods: {
    handleFolderSelection(data) {
      console.log(event.target.files[0]);
      // 根据文件读取上一级路径
      data.value = window.myApi.path.join(event.target.files[0].path, "../");
      // 重写json对象
      this.navigationJson[data.nickName] = data.value;
      console.log(this.navigationJson);
      // 写入json文件
      window.myApi.fs.writeFile(
        window.myApi.jsonPath,
        JSON.stringify(this.navigationJson, null, 2),
        "utf8",
        (err) => {
          if (err) {
            ElMessage({
              message: "写入失败" + err,
              type: "error",
              duration: 10000,
            });
          } else {
            ElMessage("路径选择成功");
          }
        }
      );
    },
    itemClick() {
      event.target.nextSibling.click();
    },
  },
};
</script>
      
<style lang="less" scoped>
@import "../less/variables.less";
.configItem {
  //   border: @border;
  padding: 0.5% 2%;
  font-size: 110%;

  > .itemTitle {
    display: flex;
    align-items: center;
    font-weight: bold;
    margin-bottom: 1%;
    > div {
      width: 5px;
      height: 20px;
      background-color: @red;
      border-radius: 5px;
      margin-right: 0.5%;
    }
  }
  > .itemContent {
    > #fileInput {
      display: none;
    }
    > button {
      background-color: transparent;
      outline: none;
      border: 0px;
      background-color: #fc3d49;
      color: white;
      border-radius: 5px;
      padding: 0.5% 1%;
      margin-bottom: 1%;
    }
    > button:hover {
      font-weight: bold;
    }
    > p {
      font-size: 80%;
      color: #555555;
      display: inline-block;
    }
    > .result {
      display: inline-block;
      border: #b4b4b4 1px solid;
      box-shadow: @box-shadow;
      outline: none;
      background-color: transparent;
      font-size: 90%;
      padding: 1% 1.5%;
      color: #5d5d5d;
      width: 50%;
      border-radius: 5px;
    }
  }
}
</style>
      